<template>
    <div class="listcom-cnt" :class="cname">
        <ul class="list-com">
            <router-link :to="'/'+item.type+'/detail/'+item.id" tag="li" class="item" :class="cname == 'imgInfoList' ? 'border-top' : ''" v-for="item of listPicInfo" :key="item.id">
               <div class="pic clear-fix">
                   <span><img v-if="item.src.length > 0" :src="item.src" alt=""></span>
                   <i class="label" v-if="item.label&&item.label.length > 0">{{item.label}}</i>
                </div> 
                <div class="info">
                    <div class="info-cont">
                        <h3 class="title" v-html="item.title"></h3>
                        <p class="des" v-html="item.desc"></p>
                        <span v-if="item.price&&item.price.length > 0" class="price" v-html="item.price"></span>                        
                    </div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: "listComponent",
    props: {
        cname: '',
        listPicInfo: {
            type: Array,
            default ( ) {
                return [
                    {
                        title: '标题',
                        src: '',//图片地址
                        desc: '描述',//描述
                        price: ''
                    }
                ]
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl'
.listcom-cnt
    width 100%
    height auto 
    overflow hidden
    .list-com 
        width 100%
        height auto 
        padding-right 10px
        box-sizing border-box
        overflow hidden
        .item 
            width 50%
            height auto 
            padding-left 10px
            padding-bottom 10px
            box-sizing border-box
            float left
            position relative
            .pic
                width 100%
                height  auto
                position relative
                .label
                    position absolute 
                    right 5px
                    top 5px
                    padding 2px 6px
                    color #fff
                    background-color #F9D777
                    font-size 12px
                span 
                    display block 
                    width 100%
                    height  100% 
                    min-height 108px
                    background-color #D8D8D8
                    overflow hidden
                    img 
                        display block 
                        width 100%
                        heihgt auto 
            .info 
                width 100%
                height 100%
                box-sizing border-box 
                padding-top 7px
                color #A7A7A7
                font-size 12px
                overflow hidden
                .info-cont
                    width 100%
                    height auto 
                    overflow hidden
                    .title 
                        font-weight bold
                        height 18px
                        line-height 18px
                        font-size 14px
                        color #1A1A1A
                        width 100%
                        ellipsis()
                    .des 
                        height 18px 
                        line-height 18px
                        width 100%
                        ellipsis()
                    .price 
                        color #FF3838
                        font-size 10px
/* li 满屏类型 */
.fullCname .list-com 
    padding 0
    .item 
        padding-left 0
        width 100%
/* 图文50%列表形式 */
.imgInfoList .list-com
    padding 0
    .item 
        padding-left 0
        padding-top 10px
        width 100%
        .pic 
            width 50%
            float left
            padding-right 10px
        .info 
            width 50%
            height 108px
            float left
            position relative
            .info-cont 
                position absolute
                left 50%
                top 50%
                transform translate(-50%,-50%)
                .price 
                    color #FF3838
                    font-size 10px
/* 图文33.3333333%列表形式 */
.percent33 .list-com .item
    width 33.333333333333336%

</style>